<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/shop_common :: source"></head>

<style>
    .panel-group{max-height:770px;overflow: auto;}
    .leftMenu{margin:10px;margin-top:5px;}
    .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
    .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
    .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
    .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
</style>

<body>
	<div th:include="/common/shop_common :: header"></div>
	<!--banner-->
	<div class="banner-top">
		<div class="container">
			<h2 class="animated wow fadeInLeft" data-wow-delay=".5s">Products</h2>
			<h3 class="animated wow fadeInRight" data-wow-delay=".5s">
				<a href="index.html">Home</a><label>/</label>Fruits<label>/</label>Women's
			</h3>
			<div class="clearfix"></div>
		</div>
	</div>
	
	<div th:include="/common/shop_common :: leftmenu"></div>
	<!-- contact -->
	<div style="padding:1em 0 0">
		<div class="container" style="width:1300px;height:800px">
			<div class="panel panel-default">
			    <div class="panel-heading">
			        <h3 class="panel-title">
			            <a>购物车列表</a>
			        </h3>
			    </div>
			    <div class="panel-body">
			        <div class="panel-body" style="width: 100%;height: 750px;">
						<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th>勾选</th>
									<th>序号</th>
									<th>商品名称</th>
									<th>sku名称</th>
									<th>原价</th>
									<th>优惠</th>
									<th>售卖价</th>
									<th>收货地址</th>
									<th>数量</th>
									<th>创建时间</th>
									<th>创建人</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody >
								<tr th:each="shopCars : ${shopCars}">
									<th><input type="checkbox" th:value="${shopCars.id}" name="car_select"></th>
									<th th:text="${shopCars.id}" th:id="'car_'+${shopCars.id}"></th>
									<th th:text="${shopCars.productName}"></th>
									<th th:text="${shopCars.skuName}"></th>
									<th th:text="${shopCars.relPrice}" id="relPrice"></th>
									<th th:text="${shopCars.discountPrice}" id="discountPrice"></th>
									<th th:text="${shopCars.countProce}" id="countProce"></th>
									<th th:text="${shopCars.receiveAddress}"></th>
									<th>
										<div class="row">
										 <div class="col-lg-6" style="width:160px;">
										   <div class="input-group">
										     <span class="input-group-btn">
										       <button id="jian_number" class="btn btn-default" type="button">-</button>
										     </span>
										     <input type="hidden" id="carId" th:value="${shopCars.id}"></input>
										     <input id="number" type="text" class="form-control" th:value="${shopCars.productNum}">
										     <span class="input-group-btn">
										       <button id="add_number" class="btn btn-default" type="button">+</button>
										     </span>
										   </div>
										 </div>
										</div>
									</th>
									<th th:text="${#dates.format(shopCars.createTime,'yyyy-MM-dd HH:mm:ss')}"></th>
									<th th:text="${shopCars.creater}"></th>
									<th>
										<button type="button" th:onclick="'javascript:deleteCar(\''+${shopCars.id}+'\');'" class="btn btn-danger">删除</button>					
									</th>
								</tr>
								<tr>
									<th colspan="2">商品金额：</th>
									<th id="countMoney">0.00</th>
									<th colspan="2">商品优惠合计</th>
									<th id="discountMoney">0.00</th>
									<th colspan="2">商品原价个合计</th>
									<th id="countRelMoney">0.00</th>
									<th>当前添加品总数量:</th>
									<th id="countNums">0</th>
									<th>
										<button type="button" th:onclick="'javascript:addOrder();'" class="btn btn-success">提交订单</button>					
									</th>
								</tr>
							</tbody>
					    </table>
				    </div>
			    </div>
			</div>
		</div>
	</div>
	<script type="text/javascript" th:inline="javascript">
	function addOrder(){
		//获取选中的购物车信息
		var carIds = []; 
		var countsCheckBox = $("input[name='car_select']:checked");
		if(countsCheckBox.length == 0){
			layer.msg('请勾选需要购买的商品', {icon: 2});
			return;
		}
		for(var i=0;i<countsCheckBox.length;i++){ 
			//使用[]取得元素是是一个domElement元素，取值需要使用.value， 
			//如果使用countsCheckBox.eq(i) 则是一个Obkject元素，就可以使用val()取值 
			//alert(countsCheckBox[i].value); 
			carId = {}; 
			carId['carId'] = countsCheckBox[i].value; 
			carIds[i] = carId; 
		}
		console.log(JSON.stringify(carIds));
		layer.confirm('确定提交订单？', {
			  btn: ['取消','确定']
			}, function(){
			  layer.msg('期待您的下此购买', {icon: 6});
			}, function(){
				$.ajax({  
		            type: 'post',  
		            dataType: 'json',  
		            url: basePath + '/order/addOrder',  
		            data: {
		            	carIds : JSON.stringify(carIds)
		            },  
		            cache: false,  
		            async: true,  
		            success: function (data) {
		            	layer.msg(data.msg, {icon: 6});
		            	if(data.code=="200"){
		            		countsCheckBox.each(function(){
			            		$(this).closest("tr").children("th").remove();
			            	})
		            	}
		            }  
		        });
			});
	}
	
	function deleteCar(id){
		layer.confirm('确定删除购物车？', {
			  btn: ['取消','确定']
			}, function(){
			  layer.msg('期待您的下此购买', {icon: 6});
			}, function(){
				$.ajax({  
		            type: 'post',  
		            dataType: 'json',  
		            url: basePath + '/shopcar/delete',  
		            data: {
		            	carId:id
		            },  
		            cache: false,  
		            async: true,  
		            success: function (data) {
		            	layer.msg(data.msg, {icon: 6});
		            	if(data.code=="200"){
		            		$("#car_"+id).closest("tr").children("th").remove();
		            	}
		            }  
		        });
			});
	}
	
	$(function(){
		$("[id=add_number]").each(function(){
			$(this).click(function(){
				var number = $(this).closest(".input-group").children("#number").val();
				var carId = $(this).closest(".input-group").children("#carId").val();
				updateCarNumber(carId,parseInt(number)+1);
				var number = $(this).closest(".input-group").children("#number").attr("value",parseInt(number)+1);
			})
		})
		
		//
		$("[id=jian_number]").each(function(){
			$(this).click(function(){
				var number = $(this).closest(".input-group").children("#number").val();
				var carId = $(this).closest(".input-group").children("#carId").val();
				updateCarNumber(carId,parseInt(number)-1);
				var number = $(this).closest(".input-group").children("#number").attr("value",parseInt(number)-1);
			})
		})
		
		$("input[name='car_select']").each(function(){
			$(this).click(function(){
               var check = $(this).prop("checked");
               if(check){
            	  var relPrice = $(this).closest("th").siblings("#relPrice").html();
            	  var discountPrice = $(this).closest("th").siblings("#discountPrice").html();
            	  var countProce = $(this).closest("th").siblings("#countProce").html();
            	  var number = parseInt($(this).closest("th").siblings("th").find("#number").val());
            	  
            	  var countMoney = $("#countMoney").html();
            	  var countRelMoney = $("#countRelMoney").html();
            	  var discountMoney = $("#discountMoney").html();
            	  var countNums = parseInt($("#countNums").html());
            	  
            	  $("#countMoney").html(accAdd(countMoney,accMul(countProce,number)));
            	  $("#countRelMoney").html(accAdd(countRelMoney,accMul(relPrice,number)));
            	  $("#discountMoney").html(accAdd(discountMoney,accMul(discountPrice,number)));
            	  $("#countNums").html(accAdd(countNums,number));
               }else{
            	   var relPrice = parseInt($(this).closest("th").siblings("#relPrice").html());
             	  var discountPrice = $(this).closest("th").siblings("#discountPrice").html();
             	  var countProce = parseInt($(this).closest("th").siblings("#countProce").html());
             	  var number = parseInt($(this).closest("th").siblings("th").find("#number").val());
             	  
             	  var countMoney = parseInt($("#countMoney").html());
             	  var countRelMoney = parseInt($("#countRelMoney").html());
             	  var discountMoney = parseInt($("#discountMoney").html());
             	  var countNums = parseInt($("#countNums").html());
             	  
             	  $("#countMoney").html(Subtr(countMoney,accMul(countProce,number)));
             	  $("#countRelMoney").html(Subtr(countRelMoney,accMul(relPrice,number)));
             	  $("#discountMoney").html(Subtr(discountMoney,accMul(discountPrice,number)));
             	  $("#countNums").html(Subtr(countNums,number));
               }
             });
		})
	})
	
	function updateCarNumber(carId,number){
		$.ajax({  
            type: 'post',  
            dataType: 'json',  
            url: basePath + '/shopcar/updateProNum',  
            data: {
            	carId:carId,
            	number:number
            },  
            cache: false,  
            async: true,  
            success: function (data) {
            	if(data.code != "200"){
            		layer.msg(data.msg)
            	}
            }  
        });
	}
	//除法
	function accDiv(arg1,arg2){ 
	 var t1=0,t2=0,r1,r2; 
	 try{t1=arg1.toString().split(".")[1].length}catch(e){} 
	 try{t2=arg2.toString().split(".")[1].length}catch(e){} 
	 with(Math){ 
	 r1=Number(arg1.toString().replace(".","")) 
	 r2=Number(arg2.toString().replace(".","")) 
	 return accMul((r1/r2),pow(10,t2-t1)); 
	 } 
	 } 
	 //乘法 
	 function accMul(arg1,arg2) 
	 { 
	 var m=0,s1=arg1.toString(),s2=arg2.toString(); 
	 try{m+=s1.split(".")[1].length}catch(e){} 
	 try{m+=s2.split(".")[1].length}catch(e){} 
	 return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m) 
	 } 
	//加法 
	function accAdd(arg1,arg2){ 
	var r1,r2,m; 
	try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
	try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
	m=Math.pow(10,Math.max(r1,r2)) 
	return (arg1*m+arg2*m)/m 
	} 
	//减法 
	function Subtr(arg1,arg2){ 
	 var r1,r2,m,n; 
	 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
	 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
	 m=Math.pow(10,Math.max(r1,r2)); 
	 n=(r1>=r2)?r1:r2; 
	 return ((arg1*m-arg2*m)/m).toFixed(n); 
	}
	</script>
</body>
</html>